<script>
import { getShowNginxPicUrl } from "@/utils/settings"
import dateUtils from "@/utils/dateUtils"
import { showModal } from "@/utils"

export default {
  name: "studyDurationInput",
  methods: {
    getShowNginxPicUrl,
    // 将 targetDuration 的秒数映射到输入框中
    mapTargetDurationToInput() {
      const targetDurationObj = dateUtils.formatTimeObject2(this.targetDuration)
      this.timesInput.h = targetDurationObj.h
      this.timesInput.m = targetDurationObj.m
    },
    //供父组件调用，表单提交之前的检查及数据转换
    beforeSubmit() {
      if (this.timesInput.h === "" || this.timesInput.m === "") {
        showModal({
          title: "提示",
          content: "请输入目标时长",
          showCancel: false,
        })
        return false
      }
      //将输入框内的内容转换为数字
      const h = parseInt(this.timesInput.h)
      const m = parseInt(this.timesInput.m)
      //检查输入的内容是否合法
      if (isNaN(h) || isNaN(m) || h < 0 || m < 0 || m > 59) {
        showModal({
          title: "提示",
          content: "请输入合法的目标时长",
          showCancel: false,
        })
        return false
      }
      //将输入的内容转换为秒数
      const targetDuration = h * 3600 + m * 60
      // 检查输入的时长是否超过最大值
      if (targetDuration > this.maxTargetDuration) {
        showModal({
          title: "提示",
          content: `目标时长不能超过${dateUtils.formatTimeObject2(this.maxTargetDuration).h}小时`,
          showCancel: false,
        })
        return false
      }
      this.$emit("update:targetDuration", targetDuration)
      return true
    },
		//数据回显
		echoData() {
			this.mapTargetDurationToInput()
		}
  },
	created() {
		this.mapTargetDurationToInput()
	},
  data() {
    return {
      dateUtils,
      timesInput: {
        h: "",
        m: "",
      },
			maxTargetDuration: 14400,
    }
  },
  props: {
    targetDuration: Number,
  },
  emits: ["update:targetDuration"],
}
</script>

<template>
  <view class="duration-input-container">
    <image class="banner" :src="getShowNginxPicUrl('v2qFqi9qV2YmGjxJHZZj.png')" mode="widthFix"></image>
    <view class="tips">
      <text>{{ `可拖动滑块设置目标时长\n最大设置 ${dateUtils.formatTimeObject2(maxTargetDuration).h} 小时` }}</text>
    </view>
    <!--					滑动条；步长：5分钟；最大：4小时-->
    <slider
      :min="0"
      :step="300"
      :max="maxTargetDuration"
      :value="targetDuration"
      @changing="
        (event) => {
          $emit('update:targetDuration', event.detail.value)
          mapTargetDurationToInput()
        }
      "
      style="margin-left: 0; margin-right: 0; margin-top: 20rpx; margin-bottom: 0"
      activeColor="#1683FA"
    ></slider>
    <!--					数字输入框-->
    <view class="number-input d-flex justify-center align-center">
      <view class="text">目标时长:</view>
      <view class="input-container">
        <input v-model="timesInput.h" class="input" />
      </view>
      <view class="text">h</view>
      <view class="input-container">
        <input v-model="timesInput.m" class="input" />
      </view>
      <view class="text">m</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.duration-input-container {
  margin: {
    left: auto;
    right: auto;
    top: 40rpx;
  }
  width: 502rpx;
  .banner {
    width: 100%;
  }
  .tips {
    text-align: right;
    margin-top: 20rpx;
    font-size: 30rpx;
    font-style: italic;
  }
  .number-input {
    margin-top: 40rpx;
    .text {
      font-size: 34rpx;
      margin-right: 10rpx;
    }
    .input-container {
      width: 70rpx;
      height: 50rpx;
      border: 2rpx solid rgba(187, 187, 187, 1);
      background: white;
      margin-right: 10rpx;

      input {
        width: 100%;
        height: 100%;
        font-size: 34rpx;
        text-align: center;
      }
    }
  }
}
</style>
